<!--
 * @Author: your name
 * @Date: 2022-03-09 11:12:18
 * @LastEditTime: 2022-03-23 15:37:35
 * @LastEditors: 樊文静
-->
<template>
  <div class="content-view-wrapper fullscreen protocol">
    <div class="content-view section-wrapper login-wrapper">
      <div class="header-wrapper">
        <div class="logo-box">
          <img src="./images/logo.png" @click="toPortalSite" />
        </div>
        <div class="text-box">
          <span class="icon">|</span> <span class="text-title">用户注册</span>
        </div>
      </div>
      <div class="content-wrapper">
        <div class="content-box">
          <ul class="steps">
            <li
              v-for="(step, idx) in defaultMenu"
              :key="idx"
              :class="[
                'steps-item',
                'click-text',
                idx <= currentsStep ? 'active' : ''
              ]"
            >
              <div class="steps-item-text">
                <span class="steps-item-idx">{{ idx + 1 }}</span>
                <span class="steps-item-label">{{ step.label }}</span>
              </div>
              <div class="steps-item-bottom"></div>
            </li>
          </ul>
          <div class="content">
            <el-form
              ref="editForm"
              :model="editForm"
              label-width="160px"
              :inline="true"
            >
              <div class=" frist select-list" v-if="currentsStep == 0">
                <div
                  :class="[
                    'select-item',
                    editForm.roleType == 1 ? 'active' : ''
                  ]"
                  @click="changeSelectType(1)"
                >
                  <div class="item-box">
                    <img src="./images/logisticsCompanies.png" alt="" />
                  </div>
                  <div class="item-text">我是物流企业</div>
                </div>
                <div
                  :class="[
                    'select-item',
                    editForm.roleType == 2 ? 'active' : ''
                  ]"
                  @click="changeSelectType(2)"
                >
                  <div class="item-box">
                    <img src="./images/shipper.png" alt="" />
                  </div>
                  <div class="item-text">我是企业货主</div>
                </div>
              </div>
              <div class="second" v-if="currentsStep == 1">
                <el-form-item
                  label="手机号"
                  prop="signPhone"
                  class="second-item"
                  :rules="[
                    { required: true, message: '请输入手机号' },
                    {
                      validator: mobileValid.rule()
                    }
                  ]"
                >
                  <el-input
                    class="inputFund"
                    type="number"
                    maxlength="20"
                    placeholder="请输入"
                    clearable
                    v-model="editForm.signPhone"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="滑动解锁"
                  class="second-item"
                  prop="isPassing"
                >
                  <drag-verify
                    ref="dragVerify"
                    :width="400"
                    :height="50"
                    progressBarBg="#79c23d"
                    background="#F5F5F5"
                    :isPassing.sync="editForm.isPassing"
                    text="请按住滑块拖动"
                    successText="验证通过"
                    handlerIcon="el-icon-d-arrow-right"
                    successIcon="el-icon-circle-check"
                    @passcallback="passcallback"
                  >
                  </drag-verify>
                </el-form-item>
                <el-form-item
                  label="验证码"
                  prop="messageCode"
                  :rules="[{ required: true, message: '请输入验证码' }]"
                  class="second-item"
                >
                  <el-input
                    class="inputFund"
                    type="number"
                    maxlength="20"
                    :disabled="!hasSendCode"
                    placeholder="请输入"
                    clearable
                    v-model="editForm.messageCode"
                  ></el-input>
                  <el-button
                    class="item-button"
                    type="primary"
                    @click="sendCode"
                    :disabled="
                      countdown > 0 ||
                        !editForm.isPassing ||
                        editForm.signPhone == ''
                    "
                  >
                    {{
                      countdown > 0 ? `${countdown}秒后重新获取` : "获取验证码"
                    }}
                  </el-button>
                </el-form-item>
                <el-form-item
                  label="邀请码"
                  prop="invitationCode"
                  class="second-item"
                >
                  <el-input
                    class="inputFund"
                    maxlength="16"
                    placeholder="请输入邀请码(可不填)"
                    clearable
                    v-model="editForm.invitationCode"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="thrid" v-if="currentsStep == 2">
                <el-form-item
                  label="企业名称"
                  prop="corpName"
                  class="second-item"
                  :rules="[{ required: true, message: '请输入企业名称' }]"
                >
                  <el-input
                    maxlength="40"
                    placeholder="请输入企业名称"
                    clearable
                    v-model="editForm.corpName"
                  ></el-input>
                </el-form-item>
                <el-form-item
                  label="登陆密码"
                  prop="webgisPassword"
                  :rules="[
                    { required: true, message: '请输入登陆密码' },
                    {
                      validator: checkPwdValidator
                    }
                  ]"
                  class="second-item"
                >
                  <el-input
                    show-password
                    maxlength="15"
                    placeholder="请输入登陆密码"
                    clearable
                    v-model="editForm.webgisPassword"
                    type="password"
                  ></el-input>
                </el-form-item>
                <div class="tips">
                  密码长度8-15位，必须包含字母（区分大小写）、数字、字符中三种组成，不能使用空格、中文。
                </div>
                <el-form-item
                  label="确认密码"
                  prop="confirmPassword"
                  :rules="[
                    { required: true, message: '请输入确认密码' },
                    {
                      validator: (rules, value, cb) =>
                        confirmPwdValidator(
                          rules,
                          value,
                          cb,
                          editForm.webgisPassword
                        )
                    }
                  ]"
                  class="second-item"
                >
                  <el-input
                    show-password
                    maxlength="15"
                    placeholder="请输入确认密码"
                    clearable
                    v-model="editForm.confirmPassword"
                    type="password"
                  ></el-input>
                </el-form-item>
              </div>
              <div class="fourth" v-if="currentsStep == 3">
                <div class="result">
                  <i class="e6-icon-check_fill icon"></i>
                  <div class="msg">
                    <div class="tips">企业认证成功!</div>
                    <div class="userName">
                      登录名: {{ userName }},请使用登录名和登陆密码进企业后台
                    </div>
                  </div>
                </div>
                <div class="img-list">
                  <div class="img-item">
                    <div class="item-box">
                      <img src="./images/last.png" alt="" />
                    </div>
                    <div class="item-text">大企货源，稳定量大</div>
                  </div>
                  <div class="img-item">
                    <div class="item-box">
                      <img src="./images/last2.png" alt="" />
                    </div>
                    <div class="item-text">资金保障，结算快速</div>
                  </div>
                  <div class="img-item">
                    <div class="item-box">
                      <img src="./images/last3.png" alt="" />
                    </div>
                    <div class="item-text">运价公正，透明竞争</div>
                  </div>
                </div>
              </div>
            </el-form>
          </div>
          <div class="button-list" v-if="currentsStep == 3">
            <div class="button" @click="goLogin">
              前往资质认证
            </div>
            <div class="button" @click="nextSteps">
              暂不认证
            </div>
          </div>
          <div class="button-list" v-else>
            <div class="button" @click="nextSteps">
              下一步
            </div>
          </div>
        </div>
      </div>
      <div class="bottom-wrapper">
        <img src="./images/under.png" />
      </div>
    </div>
  </div>
</template>
<script>
import base from "baseline-base-carrier/mixins/base";
import dragVerify from "./components/dragVerify.vue";
import {
  checkPwdValidator,
  confirmPwdValidator,
  mobileValid
} from "baseline-base-carrier/utils/validate";
import {
  portalGenerateCode,
  portalSignIn
} from "baseline-base-carrier/api/index";
const sha256 = require("js-sha256").sha256;
const defaultMenu = [
  {
    label: "角色选择",
    index: 0
  },
  {
    label: "验证手机",
    index: 1
  },
  {
    label: "填写账户信息",
    index: 2
  },
  {
    label: "注册成功",
    index: 3
  }
];
export default {
  name: "register",
  mixins: [base],
  components: { dragVerify },
  data: function() {
    return {
      defaultMenu,
      currentsStep: 0,
      checkPwdValidator,
      confirmPwdValidator,
      mobileValid,
      editForm: {
        roleType: 1,
        signPhone: "",
        messageCode: "",
        confirmPassword: "",
        invitationCode: "",
        corpName: "",
        webgisPassword: "",
        isPassing: false
      },
      hasSendCode: false,
      userName: "",
      countdown: 0 // 倒计时时间
    };
  },
  mounted() {
    if (this.$route.query.invitationCode) {
      this.editForm.invitationCode = this.$route.query.invitationCode;
    }
  },
  methods: {
    changeSelectType(type) {
      this.editForm.roleType = type;
    },
    nextSteps() {
      if (this.currentsStep == 2 || this.currentsStep == 1) {
        this.$refs.editForm.validate(async valid => {
          if (valid) {
            let params = _.cloneDeep(this.editForm);
            params.step = this.currentsStep + 1;
            if (this.currentsStep == 2) {
              params.webgisPassword = sha256(this.editForm.webgisPassword);
              params.confirmPassword = sha256(this.editForm.confirmPassword);
              // params.webgisPassword = this.editForm.webgisPassword;
              // params.confirmPassword = this.editForm.confirmPassword;
            }
            let res = await portalSignIn(params);
            if (res.code == 1) {
              if (this.currentsStep == 2) {
                this.userName = res.result.loginName;
              }
              this.currentsStep++;
            }
          }
        });
      } else {
        this.currentsStep++;
      }
    },
    async sendCode() {
      let res = await portalGenerateCode({
        signPhone: this.editForm.signPhone
      });
      if (res.code == 1) {
        if (this.countdown > 0) {
          return;
        }
        // 模拟发送验证码的操作
        this.$message.success(
          "验证码已发送到您的手机，5分钟内输入有效，请勿泄露"
        );
        this.hasSendCode = true;
        // 设置倒计时时间，这里设置为60秒
        this.countdown = 60;
        // 创建倒计时
        const intervalId = setInterval(() => {
          if (this.countdown > 0) {
            this.countdown -= 1;
          } else {
            clearInterval(intervalId);
          }
        }, 1000);
      }
    },
    passcallback() {},
    toPortalSite() {
      this.routerPush({
        name: "portalSite",
        params: {
          refresh: true
        }
      });
    },
    goLogin() {
      this.routerPush({
        name: "login",
        params: {
          refresh: true
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~baseline-base-carrier/styles/utils";
.login-wrapper {
  width: 100vw;
  height: 100vh;
  .header-wrapper {
    height: 60px;
    display: flex;
    align-items: center;
    background-color: #39aff1;
    .logo-box {
      margin-left: 60px;
    }
    .text-box {
      position: relative;
      top: -5px;
      align-items: center;
      font-size: 22px;
      color: #fff;
      text-align: center;
      line-height: 80px;
      .icon {
        font-size: 30px;
        margin: 0 10px 0 20px;
      }
    }
  }
  .content-wrapper {
    box-sizing: border-box;
    height: calc(100% - 200px);
    display: flex;
    justify-content: center;
    overflow: auto;
    padding: 40px 310px;
    .content-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-flow: column;
      width: 100%;
      // 顶部步骤
      .steps {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        &-item {
          width: 25%;
          display: flex;
          align-items: center;
          flex-flow: column;
          color: #cccccc;
          font-size: 14px;
          user-select: none;
          &:not(:last-child) {
            .steps-item-arrow {
              visibility: visible;
            }
          }
          &-text {
            display: flex;
            align-items: center;
            margin-bottom: 27px;
          }
          &-bottom {
            width: 100%;
            height: 4px;
            background-color: #cccccc;
          }
          &-idx {
            color: #ffffff;
            margin-right: 10px;
            box-sizing: border-box;
            background-color: #cccccc;
            border-radius: 50%;
            width: 30px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 16px;
          }
          &-arrow {
            margin-left: 70px;
            font-size: 14px;
            font-weight: bold;
            visibility: hidden;
          }
          &.active {
            color: $--color-primary;
            .steps-item-idx {
              color: $--color-text;
              border-color: $--color-primary;
              background: $--color-primary;
            }
            .steps-item-bottom {
              background-color: $--color-primary;
            }
          }
        }
      }
      .content {
        width: 100%;
        margin-top: 6px;
        .select-list {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          .select-item {
            display: flex;
            flex-flow: column;
            align-items: center;
            cursor: pointer;
            .item-box {
              display: flex;
              align-items: center;
              justify-content: center;
              background-color: #f5f5f5;
              width: 390px;
              height: 256px;
              margin-bottom: 40px;
            }
            .item-text {
              font-size: 16px;
              color: #bbbbbb;
            }
          }
          .active {
            .item-box {
              background-color: #b5e1fa;
              border: 10px solid #ebf7fe;
              margin-bottom: 30px;
            }
            .item-text {
              color: #39aff1;
            }
          }
        }
        .second,
        .thrid {
          display: flex;
          flex-flow: column;
          align-items: center;
          justify-content: center;
          .tips {
            margin-left: 150px;
            margin-bottom: 30px;
            color: #606266;
            font-size: 14px;
            line-height: 24px;
          }
          .second-item {
            position: relative;
            width: 600px;
            display: flex;
            align-items: center;
            /deep/ .el-form-item__label {
              font-size: 16px;
              line-height: 50px;
              padding: 0 40px 0 0;
            }
            .el-form-item__content > .el-input {
              width: 400px;
              height: 50px;
              /deep/.el-input__inner {
                color: #666666;
                height: 50px;
                line-height: 50px;
                font-size: 16px;
              }
            }
            .item-button {
              position: absolute;
              top: 8px;
              right: -180px;
              width: 146px;
              height: 36px;
            }
          }
        }
        .fourth {
          width: 100%;
          display: flex;
          flex-flow: column;
          align-items: center;
          justify-content: center;
          .result {
            display: flex;
            align-items: center;
            width: 80%;
            margin-bottom: 100px;
            .icon {
              font-size: 80px;
              color: #79c23d;
              margin-right: 20px;
            }
            .msg {
              .tips {
                color: #79c23d;
                margin-bottom: 20px;
              }
              .userName {
                color: #f56c6c;
              }
            }
          }
          .img-list {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            .img-item {
              width: 32%;
              display: flex;
              flex-flow: column;
              align-items: center;
              justify-content: center;
              .item-box {
                display: flex;
                align-items: center;
                justify-content: center;
                width: 150px;
                height: 150px;
                background-color: #ebf7fe;
                margin-bottom: 20px;
              }
              .item-text {
                font-size: 16px;
                color: #999999;
              }
            }
          }
        }
      }
      .button-list {
        display: flex;
        align-items: center;
        justify-content: space-around;
        width: 100%;
        .button {
          width: 220px;
          height: 50px;
          border-radius: 50px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #39aff1;
          color: #ffffff;
          font-size: 18px;
          cursor: pointer;
        }
      }
    }
  }
}
::v-deep {
  .inputFund input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }
  .inputFund input[type="number"] {
    -moz-appearance: textfield;
  }
}
</style>
